<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>TodoMVC</title>
  <link rel="stylesheet" href="node_modules/todomvc-common/base.css">
  <link rel="stylesheet" href="node_modules/todomvc-app-css/index.css">
  <!-- CSS overrides - remove if you don't need it -->
  <link rel="stylesheet" href="css/app.css">
</head>

<body>
  <section class="todoapp" id="app">
    <!-- 内容输入区域 -->
    <header class="header">
      <h1>todos</h1>
      <input class="new-todo" placeholder="What needs to be done?" autofocus v-model.trim="newTodo"
        @keyup.enter="addTodo">
    </header>
    <!-- 内容展示区域 -->
    <section class="main" v-show="todos.length">
      <!-- 全部状态切换框 -->
      <input id="toggle-all" class="toggle-all" type="checkbox" v-model="allDone">
      <label for="toggle-all">Mark all as complete</label>
      <ul class="todo-list">

        <!-- completed: 表示是否完成  -->
        <li v-for="todo in filteredTodo" :key="todo.id"
          :class="{completed:todo.completed,editing:todo === editingTodo}">
          <div class="view">
            <!-- checked:来确定是否展示 -->
            <input class="toggle" type="checkbox" v-model="todo.completed">
            <label @dblclick="editTodo(todo)">{{todo.title}}</label>
            <button class="destroy" @click="removeTodo(todo)"></button>
          </div>
          <!-- 编辑的输入框 -->
          <input class="edit" v-model="todo.title" v-todo-focus="todo===editingTodo" @keyup.esc="cancelEdit(todo)"
            @keyup.enter="editDone(todo)" @blur="editDone(todo)">
        </li>

      </ul>
    </section>
    <!-- 功能显示区域 -->
    <footer class="footer" v-show="todos.length">
      <!-- 用于设置状态栏中的个数统计功能 -->
      <span class="todo-count"><strong>{{remaining}}</strong> {{pluralize()}} left</span>
      <ul class="filters">
        <li>
          <a :class="{selected:todoType === 'all'}" href="#/" @click="todoType='all'">All</a>
        </li>
        <li>
          <a href="#/active" :class="{selected:todoType === 'active'}" @click="todoType='active'">Active</a>
        </li>
        <li>
          <a href="#/completed" :class="{selected:todoType === 'completed'}" @click="todoType='completed'">Completed</a>
        </li>
      </ul>
      <button class="clear-completed" v-show="todos.length > remaining" @click="removeCompleted">Clear
        completed</button>
    </footer>
  </section>
  <footer class="info">
    <p>Double-click to edit a todo</p>
    <!-- Remove the below line ↓ -->
    <p>Template by <a href="http://sindresorhus.com">Sindre Sorhus</a></p>
    <!-- Change this out with your name and url ↓ -->
    <p>Created by <a href="http://todomvc.com">you</a></p>
    <p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
  </footer>
  <script src="node_modules/vue/dist/vue.js"></script>
  <script src="js/app.js"></script>
</body>

</html>